<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/16
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <%--
       ${pageContext.request.contextPath} -> 直接拿到项目的访问路径 /web_project_war_exploded
     --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <style>
        .btn-content {
            margin: 20px 0 5px;
        }
        .user-info {
            margin-right: 30px;
        }
        .logout-link {
            padding-left: 10px;
        }
        table th, table td {
            font-size: 14px;
        }
        table tfoot td {
            text-align: center;
        }
        table tfoot .foot-pager {
            display: inline-block;
        }
        table tfoot .page-info {
            padding-top: 10px;
            float: left;
        }
        .foot-pager ul{
            margin: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand active">用户信息展示</a>
        </div>
        <p class="navbar-text navbar-right user-info">
            欢迎您，${sessionScope.user.realname} <a href="logout" class="navbar-link logout-link">退出登录</a>
        </p>
    </div>
</div>
<div class="container">
    <div class="col-xs-10 col-xs-push-1">
        <form class="form-inline" action="people">
            <div class="form-group">
                <label for="name">用户名: </label>
                <!--
                    如果是通过登录请求转发到 people对应的Servlet, name为空，在jsp的页面中数据的展示上还是一直 ""
                 -->
                <input type="text" autocomplete="off" value="${param.name}" class="form-control" name="name" id="name">
            </div>
            <div class="form-group">
                <label for="gender">性　别: </label>
                <select class="form-control" id="gender" name="gender">
                    <!--
                        param.gender出现 null是在登录成功之后重定向到 people对应Servlet的时候。
                     -->
                    <option <c:if test="${empty param.gender || param.gender == '-1'}">selected</c:if> value="-1">所有</option>
                    <option <c:if test="${param.gender == 'F'}">selected</c:if> value="F">女</option>
                    <option <c:if test="${param.gender == 'M'}">selected</c:if> value="M">男</option>
                </select>
            </div>
            <div class="form-group">
                <label for="birthday">生　日</label>
                <input value="${param.beginDate}" type="text" id="birthday" class="form-control" name="beginDate"> -
                <input value="${param.endDate}" type="text" class="form-control" name="endDate">
            </div>
            <div class="form-group">
                <button class="btn btn-danger">搜索</button>
            </div>
        </form>
    </div>
    <div class="col-xs-10 col-xs-push-1 btn-content">
        <a href="#" class="btn btn-primary">添加</a>
    </div>
    <div class="col-xs-10 col-xs-push-1 data-content">
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>邮件</th>
                <th>生日</th>
                <th>更新时间</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <c:if test="${empty requestScope.pageBean.datas}">
                <tr>
                    <td colspan="8">没有更多了数据</td>
                </tr>
            </c:if>
            <c:if test="${not empty requestScope.pageBean.datas}">
                <tbody>
                <c:forEach items="${requestScope.pageBean.datas}" var="p">
                    <tr>
                        <td>${p.id}</td>
                        <td>${p.name}</td>
                        <td>${p.gender == 'F' ? '女' : '男'}</td>  <!-- Female(女)   male男 -->
                        <td>${p.email}</td>
                        <td>${p.birthday}</td>
                        <td>${p.updateTime}</td>
                        <td>${p.createTime}</td>
                        <td>
                            <!-- 参数带 id 的目的，是因为到编辑页面的时候，需要回显数据, 那么我们需要在后台查询数据，根据id-->
                            <a href="people?method=toEdit&id=${p.id}" class="btn btn-sm btn-success">编辑</a>
                            <a href="people?id=${p.id}&method=del&name=${param.name}&gender=${param.gender}" class="btn btn-sm btn-danger">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8">
                        <span class="page-info">
                            当前第 ${requestScope.pageBean.currentPage}/ ${requestScope.pageBean.totalPage} 页
                        </span>
                            <nav class="foot-pager">
                                <ul class="pagination">
                                    <c:if test="${requestScope.pageBean.hasPre}">
                                        <li><a href="people?currentPage=1&name=${param.name}&gender=${param.gender}&beginDate=${param.beginDate}&endDate=${param.endDate}">首页</a></li>
                                        <li><a href="people?currentPage=${requestScope.pageBean.currentPage - 1}&name=${param.name}&gender=${param.gender}&beginDate=${param.beginDate}&endDate=${param.endDate}">上一页</a></li>
                                    </c:if>
                                    <c:if test="${requestScope.pageBean.hasNext}">
                                        <li><a href="people?currentPage=${requestScope.pageBean.currentPage + 1}&name=${param.name}&gender=${param.gender}&beginDate=${param.beginDate}&endDate=${param.endDate}">下一页</a></li>
                                        <li><a href="people?currentPage=${requestScope.pageBean.totalPage}&name=${param.name}&gender=${param.gender}&beginDate=${param.beginDate}&endDate=${param.endDate}">尾页</a></li>
                                    </c:if>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tfoot>
            </c:if>
        </table>
    </div>
</div>
</body>
</html>
